<template>
  <div class="container">
    <ul class="content">
      <li v-for="(item,index) in list" :key="index" @click="Change(item.path)">{{item.title}}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'index',
  layout: 'default'
})
export default class Index extends Vue {
  list: any[] = [
    {
      title: '首页',
      path: '/'
    },
    {
      title: '时政要闻',
      path: '/CurrentNews'
    },
    {
      title: '学习教育',
      path: '/Learning'
    },
    {
      title: '基层组织建设',
      path: '/Construction'
    },
    {
      title: '组织生活',
      path: '/Organizational'
    },
    {
      title: '包联驻村',
      path: '/Package'
    }
  ]
  Change(val: string) {
    this.$router.push({
      path: val
    })
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
  li {
    list-style: none;
    border: 1px solid red;
    cursor: pointer;
  }
}
</style>
